<template>
  <div>
    <h1>音量控制 progress进度条 组件 封装：</h1>
    <h4>支持滑动拖动，点击</h4>

    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
      <span>
        <div style="display: flex; align-items: center">
          <div>音量：</div>
          <evant-progress-bar
              v-model="percent"
              placement="top"
              @getPercent="getPercent"
          >
            <!--        <template #icon>-->
            <!--          <i class="icon-notice"></i>-->
            <!--        </template>-->
          </evant-progress-bar>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>


  </div>
</template>

<script>
import EvantProgressBar from '@/components/progress-bar'

export default {
  components: {
    EvantProgressBar
  },
  data() {
    return {
      dialogVisible: false,
      percent: 0
    }
  },
  watch: {
    percent(cur) {
    }
  },
  mounted() {
    this.percent = 20
  },
  methods: {
    getPercent(value) {
      this.percent = value
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>
<style scoped>
.icon-notice {
  display: inline-block;
  width: 24px;
  height: 18px;
  background: url("./icon-notice.png") center center no-repeat;
}
</style>
